<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
        }
        .container {
            flex: 1;
        }
        .container:first-child {
            background: #e9e9e9;
        }
        .ball {
            height: 100px;
            width: 100px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="ball"></div>
    </div>
    <div class="container">
        <div class="ball"></div>
    </div>

    <script>

        const balls = document.querySelectorAll('.ball');

        let innerX = 0;
        let innerY = 0;

        const edgeX = window.innerWidth * .5 - 100;
        const edgeY = window.innerHeight - 100;

        function onMouseMove (e) {
            const x = e.pageX;
            const y = e.pageY;

            const resX = x - innerX < 0
                ? 0
                : x - innerX > edgeX
                    ? edgeX
                    : x - innerX;

            const resY = y - innerY < 0
                ? 0
                : y - innerY > edgeY
                    ? edgeY
                    : y - innerY;

            for (const ball of balls) {
                ball.setAttribute('style', `transform: translate(${ resX }px, ${ resY }px);`);
            }
        }

        balls[0].addEventListener('mousedown', function (e) {
            // 记录按下的位置
            innerX = e.offsetX;
            innerY = e.offsetY;
            // 绑定鼠标移动事件
            document.addEventListener('mousemove', onMouseMove);
        });

        balls[0].addEventListener('mouseup', function (e) {
            // 解绑鼠标移动事件
            document.removeEventListener('mousemove', onMouseMove);
        });

        // setTimeout(function () {
        //     location.href = 'https://www.baidu.com';
        // }, 1000);

        const str = 'username=zhangsan&age=18&sex=男';

        console.log(str.split('&').map(function (item) { // 'username=zhangsan'
            return item.split('=');
        }));

    </script>
</body>
</html>